{% extends 'worklink/base.html' %}
{% load static %}
{% load utils %}
{% block content %}


<section class="space-ptb">
    <div>

    <div class="col-lg-12">
        <div class="row">
          <div class="col-md-12">
            <div class="job-list border">
              <div class=" job-list-logo">
                <img class="img-fluid" src="/media/{{ vacancy.company.user.avatar }}" alt="">
              </div>
              <div class="job-list-details">
                <div class="job-list-info">
                  <div class="job-list-title">
                    <h5 class="mb-0">{{ vacancy.position }}</h5>
                  </div>
                  <div class="job-list-option">
                    <ul class="list-unstyled">
                      <li><i class="fas fa-map-marker-alt pr-1"></i>{{ vacancy.country }} - {{ vacancy.city }}</li>
<!--                      <li><i class="fas fa-phone fa-flip-horizontal fa-fw"></i><span class="pl-2">(123) 345-6789</span></li>-->
                    </ul>
{#                    <div class=""> <a href="{% url 'company:respond_to_vacancy' vacancy.pk %}">Откликнуться</a> </div>#}
                    <div class=""> <a href="#">Откликнуться</a> </div>
                  </div>
                </div>
              </div>
              <div class="job-list-favourite-time">
                <a  class="job-list-favourite order-2" href="#"><i class="far fa-heart"></i></a>
                <span class="job-list-time order-1"><i class="far fa-clock pr-1"></i></span>
              </div>
            </div>
          </div>
        </div>
        <div class="border p-4 mt-4 mt-lg-5">
          <div class="row">
            <div class="col-md-4 col-sm-6 mb-4">
              <div class="d-flex">
                <i class="font-xll text-primary align-self-center flaticon-debit-card"></i>
                <div class="feature-info-content pl-3">
                  <label class="mb-1">Заработная плата</label>
                  <span class="mb-0 font-weight-bold d-block text-dark">{{ vacancy.salary }}</span>
                </div>
              </div>
            </div>
<!--            <div class="col-md-4 col-sm-6 mb-4">-->
<!--              <div class="d-flex">-->
<!--                <i class="font-xll text-primary align-self-center flaticon-love"></i>-->
<!--                <div class="feature-info-content pl-3">-->
<!--                  <label class="mb-1">Gender</label>-->
<!--                  <span class="mb-0 font-weight-bold d-block text-dark">Female</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="col-md-4 col-sm-6 mb-4">-->
<!--              <div class="d-flex">-->
<!--                <i class="font-xll text-primary align-self-center flaticon-bar-chart"></i>-->
<!--                <div class="feature-info-content pl-3">-->
<!--                  <label class="mb-1">Career Level</label>-->
<!--                  <span class="mb-0 font-weight-bold d-block text-dark">Executive</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="col-md-4 col-sm-6 mb-md-0 mb-4">-->
<!--              <div class="d-flex">-->
<!--                <i class="font-xll text-primary align-self-center flaticon-apartment"></i>-->
<!--                <div class="feature-info-content pl-3">-->
<!--                  <label class="mb-1">Industry</label>-->
<!--                  <span class="mb-0 font-weight-bold d-block text-dark">Management</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="col-md-4 col-sm-6 mb-sm-0 mb-4">-->
<!--              <div class="d-flex">-->
<!--                <i class="font-xll text-primary align-self-center flaticon-medal"></i>-->
<!--                <div class="feature-info-content pl-3">-->
<!--                  <label class="mb-1">Experience</label>-->
<!--                  <span class="mb-0 font-weight-bold d-block text-dark">2 Years</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="col-md-4 col-sm-6">-->
<!--              <div class="d-flex">-->
<!--                <i class="font-xll text-primary align-self-center flaticon-mortarboard"></i>-->
<!--                <div class="feature-info-content pl-3">-->
<!--                  <label class="mb-1">Qualification</label>-->
<!--                  <span class="mb-0 font-weight-bold d-block text-dark">Bachelor Degree</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
          </div>
        </div>
        <div class="my-4 my-lg-5">
          <h5 class="mb-3 mb-md-4">Описание:</h5>
          <p>{{ vacancy.description }}</p>
        </div>
        <hr>
<!--        <div class="my-4 my-lg-5">-->
<!--          <h5 class="mb-3 mb-md-4">Required Knowledge, Skills, and Abilities</h5>-->
<!--          <ul class="list-unstyled list-style">-->
<!--&lt;!&ndash;            <li><i class="far fa-check-circle font-md text-primary mr-2"></i>Commitment – understanding the price and having the willingness to pay that price</li>&ndash;&gt;-->
<!--&lt;!&ndash;            <li><i class="far fa-check-circle font-md text-primary mr-2"></i>Belief – believing in yourself and those around you</li>&ndash;&gt;-->
<!--&lt;!&ndash;            <li><i class="far fa-check-circle font-md text-primary mr-2"></i>Taking action – practice Ready, Fire, Aim…</li>&ndash;&gt;-->
<!--&lt;!&ndash;            <li><i class="far fa-check-circle font-md text-primary mr-2"></i>You will drift aimlessly until you arrive back at the original dock</li>&ndash;&gt;-->
<!--&lt;!&ndash;            <li class="mb-0"><i class="far fa-check-circle font-md text-primary mr-2"></i>You will run aground and become hopelessly stuck in the mud</li>&ndash;&gt;-->
<!--          </ul>-->
<!--        </div>-->
<!--        <hr>-->
<!--        <div class="mt-4 mt-lg-5">-->
<!--          <h5 class="mb-3 mb-md-4">Education + Experience</h5>-->
<!--          <ul class="list-unstyled list-style mb-4 mb-lg-0">-->
<!--&lt;!&ndash;            <li><i class="far fa-check-circle font-md text-primary mr-2"></i>You will sail along until you collide with an immovable object, after which you will sink to the bottom</li>&ndash;&gt;-->
<!--&lt;!&ndash;            <li><i class="far fa-check-circle font-md text-primary mr-2"></i>Clarity – developing the Vision</li>&ndash;&gt;-->
<!--&lt;!&ndash;            <li><i class="far fa-check-circle font-md text-primary mr-2"></i>Focus – having a plan</li>&ndash;&gt;-->
<!--&lt;!&ndash;            <li><i class="far fa-check-circle font-md text-primary mr-2"></i>Give yourself the power of responsibility. Remind yourself the only thing stopping you is yourself.</li>&ndash;&gt;-->
<!--&lt;!&ndash;            <li><i class="far fa-check-circle font-md text-primary mr-2"></i>Do it today. Remind yourself of someone you know who died suddenly and the fact that there is no guarantee that tomorrow will come.</li>&ndash;&gt;-->
<!--&lt;!&ndash;            <li><i class="far fa-check-circle font-md text-primary mr-2"></i>Now go push your own limits and succeed!</li>&ndash;&gt;-->
<!--&lt;!&ndash;            <li><i class="far fa-check-circle font-md text-primary mr-2"></i>Let success motivate you. Find a picture of what epitomizes success to you and then pull it out when you are in need of motivation.</li>&ndash;&gt;-->
<!--&lt;!&ndash;            <li><i class="far fa-check-circle font-md text-primary mr-2"></i>Belief – believing in yourself and those around you</li>&ndash;&gt;-->
<!--&lt;!&ndash;            <li class="mb-0"><i class="far fa-check-circle font-md text-primary mr-2"></i>So, make the decision to move forward. Commit your decision to paper, just to bring it into focus. Then, go for it!</li>&ndash;&gt;-->
<!--          </ul>-->
<!--        </div>-->
        
    </div>

    </div>
</section>


{% endblock content %}